<template>
<div class="tree-box">
    <el-tree ref="departmentTree" :data="tree" node-key="id" :expand-on-click-node="false" highlight-current :default-expanded-keys="defaultExpandedKeys" @node-click="current">
        <div class="custom-tree-node" slot-scope="{ node, data }">
            <div class="title">
                <i class="el-icon-folder-opened" style="color: #2cadff; margin-right: 5px"></i>
                <span>{{ node.label }}</span>
            </div>
            <div class="funs" v-if="nodeCurrent == data.id" style="color: #2cadff; font-size: 16px">
                <i class="el-icon-circle-plus-outline" @click="showAddView(node, data)"></i>
                <i class="el-icon-edit" style="margin: 0 7px" @click="showSaveView(node, data)"></i>
                <i class="el-icon-delete" @click="deleteRow(data)"></i>
            </div>
        </div>
    </el-tree>

    <edit-view ref="editView" @getTree="getTree"></edit-view>
</div>
</template>

<script>
import {
    getDepartmentTreeApi,
    deleteDepartmentApi,
} from "@/api/ucenter/department";

import editView from './edit.vue'

export default {
    components: {
        editView
    },
    data() {
        return {
            tree: [],
            // tree 默认展开节点
            defaultExpandedKeys: [],
            nodeCurrent: 0, //当前选中节点id
        };
    },
    created() {
        // 获取部门树信息
        this.getTree();
    },
    methods: {
        // 获取Tree数据
        getTree() {
            let that = this;
            getDepartmentTreeApi().then((res) => {
                let tree = res.data.tree;
                that.tree = tree;
                that.defaultExpandedKeys = tree[0] ? [tree[0].id] : [];
            });
        },
        // 根据点击的项渲染页面
        current(data, node) {
            let that = this;
            that.nodeCurrent = data.id;
            this.$emit("treeClick", data.id);
        },
        // 添加部门
        showAddView(node, data) {
            let row = {};
            row['id'] = "";
            row['parent_id'] = data.id;
            row['parent_title'] = data.label;
            row['title'] = "";
            if (this.$refs['editView']) {
                this.$refs['editView'].showAddView(row);
            } else {
                this.$nextTick(() => {
                    this.$refs['editView'].showAddView(row);
                })
            }
        },
        // 编辑部门
        showSaveView(node, data) {
            let row = Object.assign({}, data);
            row['id'] = data.id
            row['parent_id'] = node.parent.data.id;
            row['parent_title'] = node.parent.data.label;
            row['title'] = data.label;
            if (this.$refs['editView']) {
                this.$refs['editView'].showSaveView(row);
            } else {
                this.$nextTick(() => {
                    this.$refs['editView'].showSaveView(row);
                })
            }
        },
        // 删除部门
        deleteRow(params) {
            let that = this;
            this.$confirm("确认删除该部门信息", "警告", {
                type: "warning"
            }).then(res => {
                deleteDepartmentApi(params).then((res) => {
                    if (res.code != 200) {
                        that.$message.error(res.msg);
                    } else {
                        that.getTree();
                        that.$message.success(res.msg);
                    }
                });
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.fl {
    float: left;
}

.fr {
    float: right;
}

.tree-box {
    font-size: 14px;
    color: #333;

    .custom-tree-node {
        display: flex;
        width: 100%;

        .title {
            flex: 1;
        }

        .funs {
            text-align: right;
        }
    }
}
</style>
